@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  &,
  &:focus,
  &:hover {
    font-size: $font-size;
    border-radius: $border-radius;
    padding: $padding-vertical $padding-horizontal;
  }
}

@mixin border($font-color, $bg-color, $border-color) {
  background-color: mix($--color-white, $bg-color, $--button-border-percent);
  border-color: $border-color;
  color: $bg-color;

  &:hover,
  &:focus {
    background-color: $bg-color;
    border-color: $border-color;
    color: $font-color;
  }

  &:active {
    background-color: mix($--color-black, $bg-color, $--button-active-percent);
    border-color: mix($--color-black, $border-color, $--button-active-percent);
    color: mix($--color-black, $font-color, $--button-active-percent);
  }

  // 按钮类型 状态为 border disabled
  @include when(disabled) {
    &,
    &:hover,
    &:active,
    &:focus {
      background-color: mix(
        $--color-white,
        $bg-color,
        $--button-disabled-bg-percent
      );
      border-color: mix(
        $--color-white,
        $border-color,
        $--button-disabled-border-percent
      );
      color: $bg-color;
    }

    & > span {
      color: mix($--color-white, $bg-color, $--button-disabled-font-percent);
    }
  }
}

// 按钮类型
@mixin button-type($font-color, $bg-color, $border-color) {
  background-color: $bg-color;
  border-color: $border-color;
  color: $font-color;

  &:focus,
  &:hover {
    background-color: mix($--color-white, $bg-color, $--button-hover-percent);
    border-color: mix($--color-white, $border-color, $--button-hover-percent);
    color: mix($--color-white, $font-color, $--button-hover-percent);
  }

  &:active {
    background-color: mix($--color-black, $bg-color, $--button-active-percent);
    border-color: mix($--color-black, $border-color, $--button-active-percent);
    color: mix($--color-black, $font-color, $--button-active-percent);
  }

  // 按钮类型 状态为 disabled
  @include when(disabled) {
    &,
    &:hover,
    &:active,
    &:focus {
      background-color: mix(
        $--color-white,
        $bg-color,
        $--button-disabled-percent
      );
      border-color: mix(
        $--color-white,
        $border-color,
        $--button-disabled-percent
      );
      color: mix($--color-white, $font-color, $--button-disabled-percent);
    }
  }

  // 按钮类型 状态为 border
  @include when(border) {
    @include border($font-color, $bg-color, $border-color);
  }

  // 按钮类型 状态为 dash
  @include when(dashed) {
    border-style: dashed;
    &.is-disabled {
      border-style: dashed;
    }
    @include border($font-color, $bg-color, $border-color);
  }
}
